<template>
    <div class="management-less">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="未交费" name="first"></el-tab-pane>
            <el-tab-pane label="已缴费" name="second"></el-tab-pane>
        </el-tabs>
        <el-form :inline="true" :model="parmes" class="demo-form-inline t-a-l">
            <el-form-item label="考期：">
                <el-select v-model="parmes.season" placeholder="全部">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option v-for="item in kqList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="科目：">
                <el-select v-model="parmes.subjectsId" placeholder="全部">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option v-for="(item,index) in selectSub" :key="index" :label="item.chName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateList">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="export-less">
            <a :href="hrefLink">导出</a>
            <span class="jiafei">缴费总额：{{moneyNum ? moneyNum : 0}}元</span>
        </div>
        <div class="border-s my-test">
            <el-table :data="tableData" style="width: 100%" :border="false">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="paid" label="考试费用"></el-table-column>
                <el-table-column prop="vip_level" label="会员等级" :formatter="sexVipLevel"></el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formInline.pageable.size"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="pageFy"
            :total="total">
            </el-pagination>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            activeName: 'first',
            formInline: {
                entity:{
                    type:0,
                    subjectsId:'',
                    season:''
                },
                pageable:{
                    current:1,
                    size:10
                },
            },
            tableData:[],
            selectSub:[],
            parmes:{
                season:'',
                subjectsId:'',
                type:0
            },
            moneyNum:'',
            total:0,
            hrefLink:'',
            kqList:[]
        }
    },
    mounted(){
        this.subjectList()
        this.hrefLink = `http://114.116.114.219:8080/info/report/export?type=${this.parmes.type}&season=${this.parmes.season}&subjectId=${this.parmes.subjectsId}`
    },
    watch:{
        parmes:{
            deep: true,
            handler(newVal,oldVal){
                this.formInline.entity.subjectsId = newVal.subjectsId
                this.formInline.entity.season = newVal.season
            }
        }
    },
    methods:{
        // 获取科目列表
        subjectList(){
            apiHttp.apiIndex.subjects(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.selectSub = resp.data.records
                    if(this.selectSub.length > 0){
                        this.parmes.subjectsId = this.selectSub[0].id
                        this.formInline.entity.subjectsId = this.selectSub[0].id
                        this.kaoqi()
                    }
                }
            })
        },
        // 费用总额
        totalMoney(){
            apiHttp.apiIndex.reportAmount(this.parmes).then(resp=>{
                if(resp.code == 0){
                    this.moneyNum = resp.data
                }
            })
        },
        // tab切换
        handleClick(tab, event) {
            if(tab.name == 'first'){
                this.parmes.type = 0
                this.formInline.entity.type = 0
            }else{
                this.parmes.type = 1
                this.formInline.entity.type = 1
            }
            this.totalMoney()
            this.updateList()
        },
        // 报表列表
        updateList(){
            apiHttp.apiIndex.reportPage(this.formInline).then(resp =>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                    this.total = Number(resp.data.total)
                }
            })
        },
        // 翻页
        handleCurrentChange(val){
            this.formInline.pageable.current = val
            this.updateList()
        },
        pageFy(val){
            this.formInline.pageable.size = val
            this.updateList()
        },
        // 会员过率器
        sexVipLevel(row){
            if(row.vipLevel == 0){
                return '普通会员'
            }else if(row.vipLevel == 1){
                return '一年会员' 
            }else{
                return '终生会员'
            }
        },
        // 导出
        onSubmit(){
            window.open('http://localhost:8081/#/info/report/export','导出',`type=${this.parmes.type},season=${this.parmes.season},subjectId=${this.parmes.subjectsId}`)
        },
        // 考期
        kaoqi(){
            apiHttp.apiIndex.infoAllSeason('').then(resp=>{
                if(resp.code == 0){
                    this.kqList = resp.data
                    this.parmes.season = this.kqList[0]
                    this.formInline.entity.season = this.kqList[0]
                    this.totalMoney()
                    this.updateList()
                }
            })
        }
    }
}
</script>
<style lang="less">
.management-less{
    .el-tabs__item.is-active{
        color: #5d2805;
    }
    .el-tabs__item:hover{
        color: #5d2805;
    }
    .el-tabs__active-bar{
        background-color: #5d2805;
    }
    .el-form{
        .el-form-item{
            .el-form-item__content{
                .el-button--primary{
                    background-color: #5d2805;
                    border-color: #5d2805;
                }
            }
        }
    }
    .export-less{
        text-align: left;
        margin-bottom: 15px;
        a{
            padding: 7px 15px;
            display: inline-block;
            background-color: #5d2805;
            color: #fff;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            font-size: 14px;
        }
        .jiafei{
            display: block;
            margin-top: 15px;
        }
        .el-button:hover{
            background-color: #5d2805;
            border-color: #5d2805;
        }
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 25px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
        .el-textarea__inner{
            min-height: 100px !important;
        }
    }
}
.el-message-box__message{
    font-size: 18px;
}
</style>

